<template>
  <view class="user" :style="[background]">
    <!-- 顶部导航栏 -->
    <!-- #ifndef  H5 -->

    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
      <u-navbar :is-back="false" title="个人中心" :title-bold="true" :is-fixed="false" :border-bottom="false"
        :background="{ background: 'rgba(38, 100, 243,' + navBg + ')' }" :title-color="'#fff'">
        <template #right>
          <view class="header-right flex m-r-50">
            <view class="scan br30 m-r-20" @click="scanPay()">
              <u-icon name="scan" color="#fff" size="60"></u-icon>
            </view>
            <router-link to="/pages/message_center/message_center">
              <view class="notice">
                <u-icon name="chat" color="#fff" size="60"></u-icon>
              </view>
            </router-link>
          </view>
        </template>
      </u-navbar>
    </u-sticky>
    <!-- #endif -->
    <view class="top-bar">
      <view class="top-bar-left">

      </view>
    </view>
    <!-- 用户信息区域 -->
    <view class="header">
      <view class="user-info flex row-between">
        <router-link to="/bundle/pages/user_profile/user_profile">
          <view class="info flex">
            <image class="avatar m-r-20 flex-none"
              :src="isLogin ? userInfo.avatar : '/static/images/portrait_empty.png'" />
            <view v-if="isLogin">
              <view class="name flex">
                <view class="xxl bold line-2 white">{{ userInfo.nickname || userInfo.sn }}</view>
                <view class="vip-coupon br30 m-l-10" v-if="userInfo.vip">
                  <view class="level flex-none flex">
                    <text class="m-r-10">
                      <u-icon name="level" color="#fd6112" size="35"></u-icon>
                      <text class="xxs" style="color: #fd6112;">{{ userInfo.vip }}</text>
                    </text>
                    <text class="xs white">{{ userInfo.level_name }}</text>
                  </view>
                </view>
              </view>
              <view class="vip-tag flex">
                <view class="xs bold line-2 white">UID:{{ userInfo.sn || "" }}</view>
              </view>
              <view class="vip-tag flex">
                <view class="xs bold line-2 white">{{ userInfo.mobile || "" }}</view>
              </view>
            </view>
            <view v-else>
              <view style="font-size: 42rpx">点击登录</view>
              <view class="sm m-t-10 lighter">登录体验更多功能</view>
            </view>
          </view>
        </router-link>
        <view class="flex m-l-20">
          <!-- #ifdef H5 -->
          <view class="scan br30 m-r-20" @click="scanCode()">
            <u-icon name="scan" color="#fff" size="60"></u-icon>
          </view>
          <!-- #endif -->
          <router-link class="setting-btn" to="/bundle/pages/user_set/user_set">
            <u-icon name="setting-fill" color="#fff" size="50"></u-icon>
          </router-link>
        </view>
      </view>
    </view>

    <!-- VIP卡片区域 -->
    <view class="vip-card">
      <view class="vip-title flex row-between">
        <text class="vip-label">SVIP开通超级VIP</text>
        <view class="vip-coupon">
          <router-link to="/bundle/pages/integral_sign/integral_sign">
            <u-icon name="edit-pen-fill" color="#fd6112" size="35"></u-icon>
            <text>签到</text>
            <text class="arrow">›</text>
          </router-link>
        </view>
      </view>

      <!-- VIP特权区域 -->
      <view class="vip-privileges">
        <!-- <view class="privilege-item">
          <image src="/static/images/red-packet.png"></image>
          <view class="privilege-text">
            <text>专享红包</text>
            <text class="sub-text">每月领30元红包</text>
          </view>
        </view>
        <view class="privilege-item">
          <image src="/static/images/price-tag.png"></image>
          <view class="privilege-text">
            <text>专属特价</text>
            <text class="sub-text">专属用户 全站6折</text>
            <text class="sub-text">不定期更新</text>
          </view>
        </view>
        <view class="privilege-item">
          <image src="/static/images/vip-area.png"></image>
          <view class="privilege-text">
            <text>13项</text>
            <text class="sub-text">尊享权益</text>
          </view>
          <text class="arrow">›</text>
        </view> -->
      </view>
    </view>

    <view class="order-nav bg-white">
      <router-link to="/bundle/pages/user_order/user_order">
        <view class="title flex row-between">
          <view class="lg">我的订单</view>
          <view class="muted sm row">
            全部订单
            <u-icon name="arrow-right" size="28rpx" />
          </view>
        </view>
      </router-link>
      <view class="nav flex">
        <router-link class="item" :to="{
          path: '/bundle/pages/user_order/user_order',
          query: { type: 'pay' }
        }">
          <view class="flex-col col-center m-b-20">
            <view class="icon-contain">
              <view v-if="userInfo.wait_pay" class="badge xs flex row-center bg-white">
                {{ userInfo.wait_pay }}
              </view>
              <image class="nav-icon" src="/static/images/icon_my_payment.png"></image>
            </view>
            <view class="sm m-t-10">待付款</view>
          </view>
        </router-link>
        <router-link class="item" to="/bundle/pages/user_order/user_order?type=delivery">
          <view class="flex-col col-center m-b-20">
            <view class="icon-contain">
              <view v-if="userInfo.wait_delivery" class="badge xs flex row-center bg-white">
                {{ userInfo.wait_delivery }}
              </view>
              <image class="nav-icon m-b-10" src="/static/images/icon_my_fahuo.png"></image>
            </view>
            <view class="sm">待发货</view>
          </view>
        </router-link>
        <router-link class="item" to="/bundle/pages/user_order/user_order?type=delivery">
          <view class="flex-col col-center m-b-20">
            <view class="icon-contain">
              <view v-if="userInfo.wait_take" class="badge xs flex row-center bg-white">
                {{ userInfo.wait_take }}
              </view>
              <image class="nav-icon" src="/static/images/icon_my_shouhuo.png"></image>
            </view>
            <view class="sm m-t-10">待收货</view>
          </view>
        </router-link>
        <router-link class="item" to="/bundle/pages/user_comment/user_comment">
          <view class="flex-col col-center m-b-20">
            <view class="icon-contain">
              <view v-if="userInfo.wait_comment" class="badge xs flex row-center bg-white">
                {{ userInfo.wait_comment }}
              </view>
              <image class="nav-icon" src="/static/images/icon_my_pingjia.png"></image>
            </view>
            <view class="sm m-t-10">商品评价</view>
          </view>
        </router-link>
        <router-link class="item" to="/bundle/pages/after_sales/after_sales">
          <view class="flex-col col-center m-b-20">
            <view class="icon-contain">
              <view v-if="userInfo.after_sale" class="badge xs flex row-center bg-white">
                {{ userInfo.after_sale }}
              </view>
              <image class="nav-icon" src="/static/images/icon_my_shouhou.png"></image>
            </view>
            <view class="sm m-t-10">退款/售后</view>
          </view>
        </router-link>
      </view>
    </view>

    <!-- 用户资产区域 -->
    <view class="user-assets">
      <router-link class="asset-item" to="/bundle/pages/equity/equity">
      <!-- <view class="asset-item" @click="handleClickBtn4">  -->
        <view class="asset-title">
          <text>消费劵</text>
          <text class="arrow">›</text>
        </view>
        <view class="asset-value">{{ userInfo.consumer_coupon || 0 }}</view>
        <view class="asset-desc">最高获得</view>
      <!-- </view> -->
    </router-link>
    <view class="divider"></view>
      <!-- <router-link class="asset-item" to="/bundle/pages/score_wallet/score_wallet">
        <view class="asset-title">
          <text>金豆</text>
          <text class="arrow">›</text>
        </view>
        <view class="asset-value">{{ userInfo.store_score || 0 }}</view>
        <view class="asset-desc">线下畅玩</view>
      </router-link>
      <view class="divider"></view> -->
      <!-- <router-link class="asset-item" to="/bundle/pages/ticket_wallet/ticket_wallet">
        <view class="asset-title">
          <text>积分</text>
          <text class="arrow">›</text>
        </view>
        <view class="asset-value"> {{ userInfo.ticket || 0 }}</view>
        <view class="asset-desc">积分兑好礼</view>
      </router-link>
      <view class="divider"></view> -->
      <router-link class="asset-item" to="/bundle/pages/user_wallet/user_wallet">
        <view class="asset-title">
          <text>余额</text>
          <text class="arrow">›</text>
        </view>
        <view class="asset-value">{{ userInfo.user_money || 0 }}</view>
        <view class="asset-desc">礼品卡余额</view>
      </router-link>
      <!-- <view class="divider"></view> -->
      <!-- <view class="divider"></view>
      <router-link class="asset-item" to="/bundle/pages/user_9Hs/user_9Hs">
        <view class="asset-title">
          <text style="margin-top:2rpx">9Hs</text>
          <text class="arrow">›</text>
        </view>
        <view class="asset-value">{{ 0.00 }}</view>
        <view class="asset-desc">数值订单</view>
      </router-link> -->
    </view>

    <!-- 活动区域 -->
    <!-- <view class="activity-section">
      <scroll-view scroll-x class="activity-scroll" show-scrollbar="false">
        <router-link class="activity-item" to="/bundle_b/pages/qrcode/generate">
          <image src="/static/images/qrcode.png"></image>
          <text>收款码</text>
        </router-link>
        <view class="activity-item">
          <image src="/static/images/activity2.png"></image>
          <text>0元领酒</text>
        </view>
        <router-link class="activity-item" to="/bundle/pages/integral_mall/integral_mall">
          <image src="/static/images/activity3.png"></image>
          <text>积分兑换</text>
        </router-link>
        <router-link class="activity-item" to="/bundle/pages/goods_combination/goods_combination">
          <image src="/static/images/activity4.png"></image>
          <text>超值拼团</text>
        </router-link>
        <view class="activity-item">
          <image src="/static/images/activity5.png"></image>
          <text>领券中心</text>
        </view>
        <router-link class="activity-item" to="/bundle/pages/instant_purchase/instant_purchase">
          <image src="/static/images/activity2.png"></image>
          <text>云购</text>
        </router-link>
      </scroll-view>
    </view> -->

    <!-- 常用功能区域 -->
    <view class="common-functions">
      <view class="section-title">常用功能</view>
      <view class="function-grid">
        <view class="function-item" v-for="(item, index) in menuList" :key="index" @tap="menuJump(item)">
          <image :src="item.image"></image>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 底部广告 -->
    <view class="bottom-banner">
      <ad-swipers :pid="31" height="165rpx" :is-swiper="false" padding="0" radius="20rpx" :is-purchase="false">
      </ad-swipers>
    </view>
    <view class="server-box">
      <image src="/static/images/server_tel.png" class="server-tel"></image>
    </view>
    <!-- 底部选项卡 -->
    <tabbar></tabbar>

    <!-- 扫码支付确认弹窗 -->
    <u-popup v-model="showPaymentPopup" mode="bottom" border-radius="16" closeable height="40%" :style="{ zIndex: 9999 }">
      <view class="payment-popup">
        <view class="payment-title">确认支付</view>
        <view class="payment-amount">支付{{scoreType|filterScoreType}}: {{ paymentInfo.amount }}</view>
        <view class="payment-to">收款用户: {{ paymentInfo.nickname || paymentInfo.userId }}</view>
        <view class="amount-input-container">
            <input 
              type="text" 
              v-model="pay_password" 
              class="amount-input" 
              placeholder="请输入您的支付密码"
              focus
            />
          </view>
        <view class="payment-btn-group">
          <button class="payment-btn cancel-btn" @click="closePaymentPopup">取消</button>
          <button class="payment-btn confirm-btn" @click="confirmPayment">确认支付</button>
        </view>
      </view>
    </u-popup>

    <!-- 抽屉弹窗 -->
    <view class="drawer" :class="{ 'show': isShow }">
      <view class="drawer-container" :class="{ 'show': isShow }">
        <view class="drawer-content">
          <view class="tel-server" @tap="handleClickServer">电话客服</view>
          <view class="line"></view>
          <view class="tel-server" @tap="handleOnlineServer">联系在线客服</view>
          <view class="bg-black"></view>
          <view @click="toggleDrawer" class="btn">关闭</view>
        </view>
      </view>
    </view>

    <!-- 客服电话弹窗 -->
    <view class="server-pop" v-if="isShowPop">
      <view class="server-content">
        <view class="tel-num">可在手机端拨打18219129929</view>
        <view class="btn-box">
          <view class="cancle-btn" @tap="handleCancle">取消</view>
          <view class="sure-btn" @tap="copyToClipboard('18219129929')">复制到剪切板</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { getMenu } from '@/api/store'
import { toLogin } from '@/utils/login'
import { menuJump, copy } from '@/utils/tools'
import { postTransfer } from '@/api/user'

//h5扫码插件
let Qrcode = require('@/utils/reqrcode.js');
console.log('Qrcode');
console.log(Qrcode);


export default {
  data() {
    return {
      showNav: false,
      navBg: 0,
      menuList: [],
      // 添加支付相关数据
      showPaymentPopup: false,
      paymentInfo: {
        userId: '',
        nickname: '',
        amount: 0,
        timestamp: 0,
        type: 'store_score'
      },
      isShow: false,
      isShowPop: false,
      qrCodeRes: '',
      tempPaymentInfo: null, // 临时存储支付信息
      scoreType: '',
      pay_password: '', // 支付密码
    }
  },
  onLoad(options) {
    this.getMenuFun()
    // uni.$on('dataToParent', (data) => {
    //   console.log('Received data:', data);
    //   // 处理数据
    // });
  },
  onShow() {
    this.getUser()
    this.getCartNum()
  },
  onPageScroll(e) {
    const top = uni.upx2px(100)
    const { scrollTop } = e
    let percent = scrollTop / top > 1 ? 1 : scrollTop / top
    this.navBg = percent
  },
  onPullDownRefresh() {
    this.getUser().then(() => {
      uni.stopPullDownRefresh()
    })
    this.getMenuFun()
  },

  methods: {
    ...mapActions(['getCartNum', 'getUser']),
    handleClickBtn4() {
      this.$toast({
				title: '功能开发中',
			})
    },
    goLogin() {
      let { isLogin } = this
      if (isLogin) {
        uni.navigateTo({
          url: '/bundle/pages/user_profile/user_profile'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },

    async getMenuFun() {
      try {
        const { data, code } = await getMenu({
          type: 2
        })
        if (code == 1) {
          // 保留原始菜单，但如果API返回了数据，可以替换
          if (data && data.length > 0) {
            this.menuList = data
          }
        }
      } catch (error) {
        console.error('获取菜单失败', error)
      }
    },

    onCopy(e) {
      copy(this.userInfo.sn)
    },

    menuJump(item) {
      console.log(item);
      if (item.name == '联系客服') {
        this.toggleDrawer();
        return;
      } else if (item.name == '收款码') {
        console.log('收款码');
        uni.navigateTo({
          url: 'bundle_b/pages/qrcode/generate'
        })
        return;
      }
      menuJump(item)
    },

    scanPay() {
      // #ifdef H5
      this.$toast({ title: 'h5暂不支持扫码' })
      // #endif
      // #ifndef H5
      uni.scanCode({
        scanType: ['qrCode'],
        success: (data) => {
          console.log('扫码结果:', data);
          console.log('扫码结果2:', data.result);
          let reg = /\{.*?\}/.test(data.result);  //正则校验判断字符串是否包含对象字面量
          console.log(reg);
          if (!reg) {
            this.$Router.push({
              path: '/bundle/pages/store_payment/store_payment',
              query: { code: data.result }
            })
          } else {
            try {
              // 解析二维码内容
              const paymentData = JSON.parse(data.result);
              console.log('解析结果：');
              console.log(paymentData);
              // 验证数据格式
              if (!paymentData.userId || !paymentData.amount || !paymentData.timestamp) {
                throw new Error('无效的支付码')
              }

              // 验证是否是自己的二维码
              if (paymentData.userId === this.userInfo.id) {
                uni.showToast({
                  title: '不能给自己付款',
                  icon: 'none'
                })
                return
              }

              // 验证二维码是否过期（例如24小时有效期）
              const currentTime = new Date().getTime()
              const codeTime = paymentData.timestamp
              const timeLimit = 24 * 60 * 60 * 1000 // 24小时

              if (currentTime - codeTime > timeLimit) {
                uni.showToast({
                  title: '二维码已过期',
                  icon: 'none'
                })
                return
              }

              // 检查用户金豆是否足够
              const userBalance = parseFloat(this.userInfo.store_score || 0)
              // 检查用户积分是否足够
              const userTicket = parseFloat(this.userInfo.ticket || 0)
              //检查余额是否足够
              const payUserMoney = parseFloat(this.userInfo.user_money || 0)
              //检查权益包是否足够
              const userBonus = parseFloat(this.userInfo.bonus || 0)

    

              const payAmount = parseFloat(paymentData.amount);
              this.scoreType = paymentData.scoreType;

              //金豆
              if (paymentData.scoreType == 'store_score') {
                if (userBalance < payAmount) {
                  uni.showToast({
                    title: '金豆不足',
                    icon: 'none'
                  })
                  return
                }
              }

              //积分
              if (paymentData.scoreType == 'ticket') {
                if (userTicket < payAmount) {
                  uni.showToast({
                    title: '积分不足',
                    icon: 'none'
                  })
                  return
                }
              }


              //余额
              if (paymentData.scoreType == 'user_money') {
                if (payUserMoney < payAmount) {
                  uni.showToast({
                    title: '余额不足',
                    icon: 'none'
                  })
                  return
                }
              }

              //权益包
              if (paymentData.scoreType == 'bonus') {
                if (userBonus < payAmount) {
                  uni.showToast({
                    title: '权益包不足',
                    icon: 'none'
                  })
                  return
                }
              }


              
              // 显示支付确认弹窗
              this.paymentInfo = paymentData
              console.log(paymentData.result);
              this.showPaymentPopup = true;

            } catch (e) {
              console.error('解析二维码失败', e)
              uni.showToast({
                title: '无效的支付码',
                icon: 'none'
              })
            }
          }
        },
        fail: (err) => {
          console.log('扫码失败', err)
        }
      })
      // #endif	
    },

    // 关闭支付弹窗
    closePaymentPopup() {
      this.showPaymentPopup = false
    },

    // 确认支付
    confirmPayment() {
      if (!this.isLogin) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return
      }

      if (!this.pay_password) {
        uni.showToast({
          title: '请输入您的支付密码',
          icon: 'none'
        })
        return
      }

      // 显示加载中
      uni.showLoading({
        title: '支付中...'
      })

      // 调用支付接口
      postTransfer({
        fromUserId: this.userInfo.id,
        toUserId: this.paymentInfo.userId,
        amount: this.paymentInfo.amount,
        scoreType: this.paymentInfo.scoreType,  //新增
        pay_password: this.pay_password,   //新增
      }).then((res) => {
        console.log(res, 888888888)
        uni.hideLoading()
        if (res.code === 1) {
          uni.showToast({
            title: '支付成功',
            icon: 'success'
          })

          // 关闭支付确认弹窗
          this.closePaymentPopup()

          // 刷新用户信息
          this.getUser();
          //清除支付密码
          this.pay_password = '';
        } else {
          uni.showToast({
            title: res.msg || '支付失败',
            icon: 'none'
          })
        }
      })
    },

    // 原有的方法保留，但不再使用
    goPayment(code) {
      this.$Router.push({
        path: '/bundle/pages/store_payment/store_payment',
        query: { code }
      })
    },
    toggleDrawer() {
      this.isShow = !this.isShow;
    },
    handleClickServer() {
      this.isShow = false;
      this.isShowPop = true;
    },
    handleCancle() {
      this.isShowPop = false;
    },
    copyToClipboard(text) {
      console.log(text);
      // 使用uni.setClipboardData API复制文本到剪切板
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
          this.isShowPop = false;
        },
        fail: function () {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          });
        }
      });
    },
    handleOnlineServer() {
      uni.showToast({
        title: '功能完善中',
        icon: 'none'
      });
    },
    handleClick9Hs() {
      uni.showToast({
        title: '功能完善中',
        icon: 'none'
      });
    },
    //h5扫码
    scanCode() {
      this.scanCodeH5();
    },
    // H5通过拉起相机拍照来识别二维码
    scanCodeH5() {
      uni.chooseImage({
        count: 1,
        success: imgRes => {
          Qrcode.qrcode.decode(this.getObjectURL(imgRes.tempFiles[0]))
          Qrcode.qrcode.callback = (codeRes) => {
            if (codeRes.indexOf('error') >= 0) {
              // 二维码识别失败
              this.qrCodeRes = '不合法二维码：' + codeRes
              // console.log(this.qrCodeRes);
              throw new Error('无效的支付码');
            } else {
              // 二维码识别成功
              let r = this.decodeStr(codeRes)
              this.qrCodeRes = r;
              console.log(this.qrCodeRes);
              console.log(typeof (this.qrCodeRes));
              let reg = /\{.*?\}/.test(this.qrCodeRes);  //正则校验判断字符串是否包含对象字面量
              console.log(reg);

              if (!reg) {
                this.$Router.push({
                  path: '/bundle/pages/store_payment/store_payment',
                  query: { code: this.qrCodeRes }
                })
              } else {
                try {
                  // 解析二维码内容
                  const paymentData = JSON.parse(this.qrCodeRes)
                  // 验证数据格式
                  if (!paymentData.userId || !paymentData.amount || !paymentData.timestamp) {
                    throw new Error('无效的支付码')
                  }

                  // 验证是否是自己的二维码
                  if (paymentData.userId === this.userInfo.id) {
                    uni.showToast({
                      title: '不能给自己付款',
                      icon: 'none'
                    })
                    return
                  }

                  // 验证二维码是否过期（例如24小时有效期）
                  const currentTime = new Date().getTime()
                  const codeTime = paymentData.timestamp
                  const timeLimit = 24 * 60 * 60 * 1000 // 24小时

                  if (currentTime - codeTime > timeLimit) {
                    uni.showToast({
                      title: '二维码已过期',
                      icon: 'none'
                    })
                    return
                  }

                  // 检查用户余额是否足够
                  const userBalance = parseFloat(this.userInfo.store_score || 0)
                  // 检查用户积分是否足够
                  const userTicket = parseFloat(this.userInfo.ticket || 0)
                  //检查余额是否足够
                  const payUserMoney = parseFloat(this.userInfo.user_money || 0)
                  //检查权益包是否足够
                  const userBonus = parseFloat(this.userInfo.bonus || 0)


                  const payAmount = parseFloat(paymentData.amount);
                  this.scoreType = paymentData.scoreType;


                  //金豆
                  if (paymentData.scoreType == 'store_score') {
                    if (userBalance < payAmount) {
                      uni.showToast({
                        title: '金豆不足',
                        icon: 'none'
                      })
                      return
                    }
                  }

                  //积分
                  if (paymentData.scoreType == 'ticket') {
                    if (userTicket < payAmount) {
                      uni.showToast({
                        title: '积分不足',
                        icon: 'none'
                      })
                      return
                    }
                  }

                  //余额
                  if (paymentData.scoreType == 'user_money') {
                    if (payUserMoney < payAmount) {
                      uni.showToast({
                        title: '余额不足',
                        icon: 'none'
                      })
                      return
                    }
                  }

                  //权益包
                  if (paymentData.scoreType == 'bonus') {
                    if (userBonus < payAmount) {
                      uni.showToast({
                        title: '权益包不足',
                        icon: 'none'
                      })
                      return
                    }
                  }

                  // 显示支付确认弹窗
                  this.paymentInfo = paymentData
                  console.log(paymentData.result);
                  this.showPaymentPopup = true;

                } catch (e) {
                  console.error('解析二维码失败', e)
                  uni.showToast({
                    title: '无效的支付码',
                    icon: 'none'
                  })
                }
              }
            }
          }
        }
      })
    },
    // 获取文件地址函数
    getObjectURL(file) {
      var url = null
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.URL !== undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    },
    // 解码，输出：中文
    decodeStr(str) {
      var out, i, len, c;
      var char2, char3;
      out = "";
      len = str.length;
      i = 0;
      while (i < len) {
        c = str.charCodeAt(i++);
        switch (c >> 4) {
          case 0:
          case 1:
          case 2:
          case 3:
          case 4:
          case 5:
          case 6:
          case 7:
            // 0xxxxxxx
            out += str.charAt(i - 1);
            break;
          case 12:
          case 13:
            // 110x xxxx 10xx xxxx
            char2 = str.charCodeAt(i++);
            out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
            break;
          case 14:
            // 1110 xxxx 10xx xxxx 10xx xxxx
            char2 = str.charCodeAt(i++);
            char3 = str.charCodeAt(i++);
            out += String.fromCharCode(((c & 0x0F) << 12) |
              ((char2 & 0x3F) << 6) |
              ((char3 & 0x3F) << 0));
            break;
        }
      }
      return out;
    },
  },

  computed: {
    ...mapGetters(['userInfo', 'inviteCode', 'appConfig', 'isLogin']),
    background() {
      const { center_setting } = this.appConfig
      return center_setting.top_bg_image
        ? {
          'background-image': `url(${center_setting.top_bg_image})`
        }
        : {
          'background-color': '#F5424C',
          'background-image': 'linear-gradient(to bottom, #F5424C, #F5424C 300rpx, #F5F5F5 300rpx)'
        }
    }
  },
  filters: {
    filterScoreType(value) {
      switch (value) {
        case 'store_score': return '金豆';
        case 'ticket': return '积分';
        case 'user_money': return '余额';
        case 'bonus': return '权益包';
        default: return value;
      }
    }
  }
}
</script>

<style lang="scss">
.user {
  min-height: 100vh;
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding-bottom: 120rpx;
}

/* 顶部操作栏 */
.top-bar {
  display: flex;
  justify-content: flex-end;
  padding: 20rpx 30rpx;
  position: relative;
  height: 20rpx;
}

.top-bar-left {
  display: flex;
  align-items: center;
  position: absolute;
  right: 30rpx;
  top: 20rpx;
}

.dot {
  width: 10rpx;
  height: 10rpx;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10rpx;
}

.line {
  width: 30rpx;
  height: 6rpx;
  background-color: #fff;
  margin-right: 10rpx;
}

.circle {
  width: 20rpx;
  height: 20rpx;
  border: 2rpx solid #fff;
  border-radius: 50%;
}

/* 用户信息区域 */
.header {
  padding: 0 30rpx 30rpx;
}

.user-info {
  width: 100%;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 2rpx solid #fff;
}

.name {
  margin-bottom: 10rpx;
}

.white {
  color: #fff;
}

.vip-tag {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.vip-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.setting-btn image {
  width: 50rpx;
  height: 50rpx;
}

/* VIP卡片区域 */
.vip-card {
  margin: 0 30rpx;
  background-color: #222;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.vip-title {
  padding: 20rpx;
  border-bottom: 1rpx solid #333;
}

.vip-label {
  color: #FFD700;
  font-size: 28rpx;
  font-weight: bold;
}

.vip-coupon {
  display: flex;
  align-items: center;
  background-color: #FFD700;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
}

.vip-coupon image {
  width: 30rpx;
  height: 30rpx;
  margin-right: 6rpx;
}

.vip-coupon text {
  font-size: 24rpx;
  color: #222;
}

.arrow {
  font-size: 30rpx;
  margin-left: 6rpx;
}

.vip-privileges {
  display: flex;
  padding: 20rpx 0;
}

.privilege-item {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: relative;
}

.privilege-item image {
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
}

.privilege-text {
  display: flex;
  flex-direction: column;
}

.privilege-text text {
  color: #FFD700;
  font-size: 26rpx;
}

.sub-text {
  font-size: 22rpx !important;
  color: #999 !important;
  margin-top: 4rpx;
}

/* 用户资产区域 */
.user-assets {
  margin: 0 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  display: flex;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.asset-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.asset-title {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

.asset-title .arrow {
  color: #999;
  margin-left: 6rpx;
}

.asset-value {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin: 10rpx 0;
}

.unit {
  font-size: 24rpx;
  font-weight: normal;
  margin-left: 4rpx;
}

.asset-desc {
  font-size: 24rpx;
  color: #999;
}

.divider {
  width: 1rpx;
  background-color: #eee;
  margin: 10rpx 0;
}

/* 活动区域 */
.activity-section {
  margin: 0 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.activity-scroll {
  white-space: nowrap;
}

.activity-item {
  display: inline-flex;
  width: 140rpx;
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.activity-item image {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.activity-item text {
  font-size: 24rpx;
  color: #333;
}

/* 常用功能区域 */
.common-functions {
  margin: 0 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.function-grid {
  display: flex;
  flex-wrap: wrap;
}

.function-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.function-item image {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 10rpx;
}

.function-item text {
  font-size: 24rpx;
  color: #333;
}

/* 底部广告 */
.bottom-banner {
  margin: 0 30rpx;
  margin-bottom: 20rpx;
}

.bottom-banner image {
  width: 100%;
  border-radius: 16rpx;
}

/* 我的服务标题 */
.my-service {
  margin: 0 30rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.order-nav {
  .icon-contain {
    position: relative;
  }
}

.order-nav,
.my-assets {
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
}

.server-nav {
  margin: 20rpx;
  border-radius: 8rpx;
}

.title {
  height: 88rpx;
  padding: 0 30rpx;
  border-bottom: $-dashed-border;
}

.nav {
  padding: 26rpx 0 0;

  .assets-item {
    flex: 1;
  }

  .item {
    width: 25%;
  }

  .badge {
    padding: 0 6rpx;
    min-width: 28rpx;
    height: 28rpx;
    border-radius: 28rpx;
    box-sizing: border-box;
    border: 1rpx solid $-color-primary;
    color: $-color-primary;
    position: absolute;
    left: 33rpx;
    top: -10rpx;
    z-index: 2;
  }

  .nav-icon {
    width: 52rpx;
    height: 52rpx;
  }
}

/* 支付弹窗样式 */
.payment-popup {
  padding: 40rpx 30rpx;
  ;
}

.payment-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.payment-amount {
  font-size: 34rpx;
  font-weight: bold;
  margin: 20rpx 0;
  color: #F5424C;
}

.payment-to {
  font-size: 30rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.payment-btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}

.payment-btn {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
  text-align: center;
}

.cancel-btn {
  background-color: #F8F8F8;
  color: #333;
  border: 1rpx solid #EEEEEE;
}

.confirm-btn {
  background-color: #F5424C;
  color: #FFFFFF;
}

.server-box {
  text-align: center;
  // height: 114rpx;
  background-color: #F5F5F5;

}

.server-box .server-tel {
  margin-top: 30rpx;
  width: 800rpx;
  height: 114rpx;
}

.drawer {
  position: fixed;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

.drawer.show {
  display: block;
}

.drawer-container {
  position: fixed;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 310rpx;
  background-color: #fff;
  transition: bottom 0.5s ease-in-out;
}

.drawer-container.show {
  bottom: 0;
}

.drawer-content {
  padding: 0px;
}

.line {
  width: 100%;
  border-bottom: 1rpx solid #eee;
}

.tel-server {
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 32rpx;
}

.bg-black {
  width: 100%;
  height: 10rpx;
  background: #eee;
}

.btn {
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 32rpx;
}

.server-pop {
  position: fixed;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  // display: none;
}

.server-content {
  width: 600rpx;
  height: 300rpx;
  background-color: #fff;
  margin: auto;
  border-radius: 30rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #eee;
}

.tel-num {
  text-align: center;
  margin: 60rpx auto;
  font-size: 36rpx;
}

.btn-box {
  margin: 0 30rpx;
  display: flex;
}

.btn-box view {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 36rpx;
  border-radius: 10rpx;
}

.cancle-btn {
  flex: 1;
  background: #eee;
  margin-right: 20rpx;
}

.sure-btn {
  flex: 1;
  background: #07c160;
  color: #fff;
  margin-left: 20rpx;
}

.amount-input-container {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #EEEEEE;
  padding-bottom: 20rpx;
}
</style>